<template>
	<view class="main">
		<navbar :iSimmersive="false" title-color="#ffffff" background="#1b43c4" :placeholder="true" title="绑定手机号"></navbar>
		<view class="item">
			<view class="phone">
				<input type="text" v-model="name" placeholder="请输入姓名">
			</view>
			<view class="phone">
				<input type="number" maxlength="11" v-model="phone" placeholder="请输入手机号">
			</view>
			<view class="new-code">
				<input class="code" type="number" maxlength="4" v-model="code" placeholder="请输入验证码">
				<view class="new-code-btn" @click="sendCode">
					{{codetext}}
				</view>
			</view>
			<view class="bottom-btn b-on" @click="saveData">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				phone: '',
				codetext: '获取验证码',
				code: '',
				users: {},
				isCodeTrue: true,
				TimerB: null,
				is_save: true,
			}
		},
		onLoad() {
			this.users = this.$storage.getJson("users");
		},
		methods: {
			sendCode(){
				var that = this
				if (this.phone == '') {
					that.$utils.msg("请输入手机号！");
					return false
				} else {
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phone))) {
						that.$utils.msg("请输入正确的手机号码！");
						return false;
					}
				}
				let params = {
					user_id: that.users.id,
					username: that.phone,
					type: 'bind'
				}
				if (this.isCodeTrue) {
					this.isCodeTrue = false
					that.$http.sendSMS(params).then((res)=>{
						that.$utils.msg(res.info);
						if (res.status == 1) {
							let holdTimes = 60; //定义变量并赋值
							that.codetext = "重新获取(60)"
							that.TimerB = setInterval(() => {
								if (holdTimes <= 0) {
									that.isCodeTrue = true;
									that.codetext = "获取验证码"
									clearInterval(this.TimerB); //清除该函数
									return; //返回前面
								}
								that.codetext = "重新获取(" + holdTimes + ")"
								holdTimes--;
							}, 1000)
						} else {
							that.isCodeTrue = true;
						}
					})
				}
			},
			saveData(){
				var that = this
				if (this.name == '') {
					that.$utils.msg("请输入姓名！");
					return false
				}
				if (this.phone == '') {
					that.$utils.msg("请输入手机号！");
					return false
				} else {
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phone))) {
						that.$utils.msg("请输入正确的手机号码！");
						return false;
					}
				}
				if (this.code == '') {
					that.$utils.msg("请输入验证码！");
					return false
				}
				let params = {
					user_id: that.users.id,
					username: that.phone,
					name: that.name,
					code: that.code
				}
				if (this.is_save) {
					this.is_save = false
					this.$http.posBindPhone(params).then((res)=>{
						this.is_save = true
						that.$utils.msg(res.info);
						if(res.status && res.status == 1){
							setTimeout(function() {
								that.$utils.navigateBack();
							}, 1500)
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	.item {
		margin: 30rpx;
		padding: 20rpx;
		background-color: #ffffff;
		.phone {
			padding: 20rpx 0;
			border-bottom: 1px solid #f4f4f5;
		}
		.new-code {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f4f4f5;
			padding-bottom: 10rpx;
			
			.code {
				width: 60%;
				height: 70rpx;
			}
			
			.new-code-btn {
				padding: 16rpx 20rpx;
				color: #ffffff;
				background-color: #fa3534;
				border-radius: 20rpx;
			}
		}
	}
	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		padding: 30rpx 0;
		background-color: #c8c9cc;
		color: #ffffff;
	}
	
	.b-on {
		background-color: #fa3534;
	}
</style>
